import {Layout, Button, Space, Flex, Radio, Input} from 'antd';
import {LeftOutlined, RightOutlined, CheckCircleTwoTone, setTwoToneColor, getTwoToneColor} from "@ant-design/icons";
import React, {useState} from 'react';
import {useNavigate, useParams} from 'react-router-dom';
export default function OrderSuccessPage() {
    const { id } = useParams();

    setTwoToneColor('#FE4E84');
    getTwoToneColor(); // #eb2f96


    const navigate = useNavigate();
    const handleToOrder = () => {
        navigate('/order/info/'+id);
        //TODO:其实是oder/:id
        //navigate('/order/:id');
    }

    const handleToHome = () => {
        navigate('/');
    }

    const handleBack = () => {
        navigate('/')
    }

    return (
        <div style={{ margin: 'auto', backgroundColor: '#fff' }}>
        <div className="pay-container" >

            <div className="header-container" style={{ marginTop: 10, textAlign: "center", display: "flex", alignItems: "center" }}>
                <LeftOutlined onClick={handleBack}/>
                <h2 style={{ textAlign: "center", margin: "0 auto" }}>支付成功</h2>
            </div>


            <div className="success-img" style={{textAlign:"center",marginTop:100}}>
                <CheckCircleTwoTone style={{ fontSize: '80px' }} />
                <h3>支付成功</h3>
            </div>

            <div className="button-container" style={{ marginTop: 100, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <Button type="primary" style={{ marginTop: 20, width: '90%', backgroundColor: '#FE4E84', borderRadius:10, height:40, fontSize:20 }} onClick={handleToOrder}>
                    查看订单
                </Button>
                <Button
                    type="primary"
                    style={{
                        marginTop: 20,
                        width: '90%',
                        backgroundColor: 'white',
                        color: 'black', // 设置文字颜色为黑色,
                        borderRadius:10,
                        height:40,
                        fontSize:20
                    }}
                    onClick={handleToHome}
                >
                    返回首页
                </Button>
            </div>

        </div>
        </div>
    );
}